<!--
 * @Author: your name
 * @Date: 2021-10-19 15:34:19
<<<<<<< HEAD
 * @LastEditTime: 2021-10-21 18:07:34
=======
 * @LastEditTime: 2021-10-21 14:01:55
>>>>>>> xlj
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\classDetail.vue
-->
<template>
  <div class="app">
    <van-nav-bar title="热门课程" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="20" @click="goSearch" />
      </template>
    </van-nav-bar>

    <!-- 排行榜 -->
    <div class="paihang" v-for="(item, index) in topList" :key="item.id">
      <div class="paiming">Top{{ index + 1 }}</div>
      <div class="renwu">
        <div><img :src="item.imgUrl" alt="" /></div>
        <div class="right">
          <p class="bt">{{ item.title }}</p>
          <p class="jieshao">{{ item.motto }}</p>
          <p class="jieshao">{{ item.position }}</p>
          <div class="button">
            <p class="jiaqian">{{ item.price }}讲/免费</p>
            <p class="jiaqian">{{ item.num }}人学习</p>
          </div>
        </div>
      </div>
      <van-divider
        :style="{ color: '#E1E1E1', borderColor: '#E1E1E1', padding: '0 16px' }"
      >
      </van-divider>
    </div>

    <!-- <div class="paihang">
      <div class="paiming">Top2</div>
      <div class="renwu">
        <div><img src="../assets/img/play-img/热门分类01.png" alt="" /></div>
        <div class="right">
          <p class="bt">王立铭 · 进化论50讲</p>
          <p class="jieshao">聪明人的思想基石</p>
          <p class="jieshao">王立铭 · 浙江大学生命科学院教授</p>
          <div class="button">
            <p class="jiaqian">50讲/免费</p>
            <p class="jiaqian">9854人学习</p>
          </div>
        </div>
      </div>
      <van-divider
        :style="{ color: '#E1E1E1', borderColor: '#E1E1E1', padding: '0 16px' }"
      >
      </van-divider>
    </div>

    <div class="paihang">
      <div class="paiming">Top3</div>
      <div class="renwu">
        <div><img src="../assets/img/play-img/热门分类01.png" alt="" /></div>
        <div class="right">
          <p class="bt">王立铭 · 进化论50讲</p>
          <p class="jieshao">聪明人的思想基石</p>
          <p class="jieshao">王立铭 · 浙江大学生命科学院教授</p>
          <div class="button">
            <p class="jiaqian">50讲/免费</p>
            <p class="jiaqian">9854人学习</p>
          </div>
        </div>
      </div>
      <van-divider
        :style="{ color: '#E1E1E1', borderColor: '#E1E1E1', padding: '0 16px' }"
      >
      </van-divider>
    </div> -->
    <!-- 排行榜 -->

    <!-- 其他人 -->
    <div class="other">
      <ul>
        <li v-for="(item, index) in lastList" :key="item.id">
          <div class="paiming">Top {{ index + 4 }}</div>
          <div>
            <img :src="item.imgUrl" alt="" />
          </div>
          <div class="book">{{ item.motto }}</div>
          <div class="writer">{{ item.position }}</div>
        </li>
        <!-- <li>
          <div class="paiming">Top 5</div>
          <div>
            <img src="../assets/img/play-img/补充03-学习电子书02.png" alt="" />
          </div>
          <div class="book">商业参考</div>
          <div class="writer">蔡钰</div>
        </li>
        <li>
          <div class="paiming">Top 6</div>
          <div>
            <img src="../assets/img/play-img/补充03-学习电子书03.png" alt="" />
          </div>
          <div class="book">商业参考</div>
          <div class="writer">蔡钰</div>
        </li>
        <li>
          <div class="paiming">Top 7</div>
          <div>
            <img src="../assets/img/play-img/补充03-学习电子书04.png" alt="" />
          </div>
          <div class="book">商业参考</div>
          <div class="writer">蔡钰</div>
        </li> -->
      </ul>
    </div>
    <van-divider
      :style="{
        color: '#E1E1E1',
        borderColor: '#E1E1E1',
        padding: '10px 16px',
      }"
    >
    </van-divider>
    <!-- 其他人 -->
  </div>
</template>

<script>
import { NavBar } from "vant";
import { useRouter } from "vue-router";
import { ref, computed } from "vue";
import { Icon } from "vant";
import { Divider } from "vant";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    const onClickRight = () => console.log("按钮");
    const value = ref(50);

    const goSearch = () => {
      router.push("/grabble");
    };

    store.dispatch("getClassHot");
    const hotList = computed(() => store.state.classHot.classHotList);
    const topList = computed(() => hotList.value.slice(0, 3));
    const lastList = computed(() => hotList.value.slice(3, 7));

    return {
      value,
      onClickLeft,
      onClickRight,
      goSearch,
      hotList,
      topList,
      lastList,
    };
  },

  components: {
    VanNavBar: NavBar,
    VanIcon: Icon,
    VanDivider: Divider,
  },
};
</script>

<style lang="less" scoped>
.van-icon {
  color: black;
}
/deep/.van-nav-bar .van-icon {
  color: #000000;
}
/deep/.van-divider {
  margin-top: 0px;
  margin-bottom: 0px;
}
.app {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.paiming {
  font-size: 14px;
  font-weight: bold;
  margin: 10px;
  color: #323232;
}
.jieshao {
  font-size: 12px;
  color: #646464;
}
.jiaqian {
  font-size: 12px;
  color: #909090;
}
.paihang {
  img {
    width: 100px;
    height: 130px;
  }
  .renwu {
    width: 95%;
    margin: auto;
    display: flex;
    .bt {
      font-size: 14px;
      font-weight: bold;
    }
    .right {
      display: flex;
      width: 100%;
      flex-direction: column;
      p {
        margin: 0 0 10px 10px;
      }
    }
    .button {
      display: flex;
      justify-content: space-between;
      padding: 42px 0 0 0;
    }
  }
}
.other {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;

  img {
    width: 100px;
    height: 130px;
  }
  ul {
    width: 100%;
    display: flex;
    overflow-x: auto;
    li {
      padding: 0px 5px;
      width: 100%;

      .book {
        font-size: 14px;
        font-weight: bold;
        margin: 0px 0 5px 0px;
        overflow: hidden;
      }
      .writer {
        font-size: 12px;
        color: #646464;
        overflow: hidden;
      }
    }
  }
}
.tuijian {
  p {
    background-color: #f2f8fe;
  }
}
</style>
